<script type="text/html" id="tmpl-media-frame">
	<div class="media-frame-menu"></div>
	<div class="media-frame-title"></div>
	<div class="media-frame-router"></div>
	<div class="media-frame-content"></div>
	<div class="media-frame-toolbar"></div>
	<div class="media-frame-uploader"></div>
</script>

<script type="text/html" id="tmpl-media-modal">
	<div class="media-modal wp-core-ui">
		<a class="media-modal-close" href="#" title="关闭"><span class="media-modal-icon"></span></a>
		<div class="media-modal-content"></div>
	</div>
	<div class="media-modal-backdrop"></div>
</script>

<script type="text/html" id="tmpl-uploader-window">
	<div class="uploader-window-content">
		<h3>拖文件至此可上传</h3>
	</div>
</script>

<script type="text/html" id="tmpl-uploader-editor">
	<div class="uploader-editor-content">
		<div class="uploader-editor-title">拖文件至此可上传</div>
	</div>
</script>

<script type="text/html" id="tmpl-uploader-inline">
	<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
		<div class="uploader-inline-content {{ messageClass }}">
			<# if ( data.message ) { #>
				<h3 class="upload-message">{{ data.message }}</h3>
			<# } #>
			<div class="upload-ui">
				<h3 class="upload-instructions drop-instructions">拖文件到任何地方来上传</h3>
				<a href="#" class="browser btn btn-default">选择文件</a>
			</div>

			<div class="upload-inline-status"></div>

			<div class="post-upload-ui">

				<p class="max-upload-size">最大上传文件大小：64MB.</p>

				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
					<p class="suggested-dimensions">
						推荐的图像尺寸： {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
					</p>
				<# } #>
			</div>
	</div>
</script>

<script type="text/html" id="tmpl-uploader-status">
	<h3>正上传</h3>
	<a class="upload-dismiss-errors" href="#">忽略错误</a>

	<div class="media-progress-bar"><div></div></div>
	<div class="upload-details">
			<span class="upload-count">
				<span class="upload-index"></span> / <span class="upload-total"></span>
			</span>
		<span class="upload-detail-separator">&ndash;</span>
		<span class="upload-filename"></span>
	</div>
	<div class="upload-errors"></div>
</script>

<script type="text/html" id="tmpl-uploader-status-error">
	<span class="upload-error-label">错误</span>
	<span class="upload-error-filename">{{{ data.filename }}}</span>
	<span class="upload-error-message">{{ data.message }}</span>
</script>

<script type="text/html" id="tmpl-attachment">
	<div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
		<# if ( data.uploading ) { #>
			<div class="media-progress-bar"><div></div></div>
		<# } else if ( 'image' === data.type ) { #>
			<div class="thumbnail">
				<div class="centered">
					<img src="{{ data.size.url }}" draggable="false" />
				</div>
			</div>
		<# } else { #>
			<img src="{{ data.icon }}" class="icon" draggable="false" />
			<div class="filename">
				<div>{{ data.filename }}</div>
			</div>
		<# } #>

		<# if ( data.buttons.close ) { #>
			<a class="close media-modal-icon" href="#" title="移除"></a>
		<# } #>

		<# if ( data.buttons.check ) { #>
			<a class="check" href="#" title="取消选择"><div class="media-modal-icon"></div></a>
		<# } #>
	</div>
	<#
		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
		if ( data.describe ) { #>
		<# if ( 'image' === data.type ) { #>
			<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
			       placeholder="描述此图&hellip;" {{ maybeReadOnly }} />
			<# } else { #>
				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
				<# if ( 'video' === data.type ) { #>
					placeholder="描述此视频&hellip;"
				<# } else if ( 'audio' === data.type ) { #>
					placeholder="描述此音频&hellip;"
				<# } else { #>
					placeholder="描述此文件&hellip;"
				<# } #> {{ maybeReadOnly }} />
			<# } #>
		<# } #>
</script>

<script type="text/html" id="tmpl-attachment-details">
	<h3>
		附件详情
		<span class="settings-save-status">
			<span class="spinner"></span>
			<span class="saved">已保存。</span>
		</span>
	</h3>
	<div class="attachment-info">
		<div class="thumbnail">
			<# if ( data.uploading ) { #>
			<div class="media-progress-bar"><div></div></div>
			<# } else if ( 'image' === data.type ) { #>
				<img src="{{ data.size.url }}" draggable="false" />
			<# } else { #>
				<img src="{{ data.icon }}" class="icon" draggable="false" />
			<# } #>
		</div>
		<div class="details">
			<div class="filename">{{ data.filename }}</div>
			<div class="uploaded">{{ data.dateFormatted }}</div>

			<# if ( 'image' === data.type && ! data.uploading ) { #>
				<# if ( data.width && data.height ) { #>
					<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
				<# } #>

				<# if ( data.can.save ) { #>
					<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank">编辑图像</a>
					<a class="refresh-attachment" href="#">刷新</a>
				<# } #>
			<# } #>

			<# if ( data.fileLength ) { #>
				<div class="file-length">长度： {{ data.fileLength }}</div>
			<# } #>

			<# if ( ! data.uploading && data.can.remove ) { #>
				<a class="delete-attachment" href="#">永久删除</a>
			<# } #>

			<div class="compat-meta">
			<# if ( data.compat && data.compat.meta ) { #>
				{{{ data.compat.meta }}}
				<# } #>
			</div>
		</div>
	</div>

	<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
		<label class="setting" data-setting="title">
			<span>标题</span>
			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
		</label>
		<label class="setting" data-setting="caption">
			<span>说明</span>
			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
		</label>
		<# if ( 'image' === data.type ) { #>
		<label class="setting" data-setting="alt">
			<span>替代文本</span>
			<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
		</label>
		<# } #>
		<label class="setting" data-setting="description">
			<span>图像描述</span>
			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
		</label>
</script>

<script type="text/html" id="tmpl-media-selection">
	<div class="selection-info">
		<span class="count"></span>
		<# if ( data.editable ) { #>
			<a class="edit-selection" href="#">编辑</a>
		<# } #>
		<# if ( data.clearable ) { #>
			<a class="clear-selection" href="#">清空</a>
		<# } #>
	</div>
	<div class="selection-view"></div>
</script>


<script type="text/html" id="tmpl-attachment-display-settings">
	<h3>附件显示设置</h3>

	<# if ( 'image' === data.type ) { #>
		<label class="setting">
			<span>对齐方式</span>
			<select class="alignment" data-setting="align"
			<# if ( data.userSettings ) { #>
				data-user-setting="align"
			<# } #>>

			<option value="left">左</option>
			<option value="center">中</option>
			<option value="right">右</option>
			<option value="none" selected> 无</option>
			</select>
		</label>
		<# } #>

			<div class="setting">
				<label>
					<# if ( data.model.canEmbed ) { #>
						<span>嵌入或链接</span>
					<# } else { #>
						<span>链接到</span>
					<# } #>

					<select class="link-to" data-setting="link"
					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
						data-user-setting="urlbutton"
					<# } #>>

					<# if ( data.model.canEmbed ) { #>
							<option value="embed" selected> 内嵌媒体播放器</option>
							<option value="file">
					<# } else { #>
							<option value="file" selected>
					<# } #>
							<# if ( data.model.canEmbed ) { #>
									链接到媒体文件
							<# } else { #>
									媒体文件
							<# } #>

							</option>
					<option value="post">
						<# if ( data.model.canEmbed ) { #>
							链接到附件页面
						<# } else { #>
							附件页面
						<# } #>
					</option>
					<# if ( 'image' === data.type ) { #>
						<option value="custom"> 自定义URL</option>
						<option value="none"> 无</option>
					<# } #>
					</select>
				</label>
				<input type="text" class="link-to-custom" data-setting="linkUrl" />
			</div>

			<# if ( 'undefined' !== typeof data.sizes ) { #>
				<label class="setting">
					<span>尺寸</span>
					<select class="size" name="size" data-setting="size"
					<# if ( data.userSettings ) { #>
						data-user-setting="imgsize"
					<# } #>>
					<#
						var size = data.sizes['thumbnail'];
						if ( size ) { #>
						<option value="thumbnail" >
							缩略图 &ndash; {{ size.width }} &times; {{ size.height }}
						</option>
						<# } #>
							<#
							var size = data.sizes['medium'];
							if ( size ) { #>
							<option value="medium" >
								中等 &ndash; {{ size.width }} &times; {{ size.height }}
							</option>
							<# } #>
							<#
							var size = data.sizes['large'];
							if ( size ) { #>
							<option value="large" >
								大 &ndash; {{ size.width }} &times; {{ size.height }}
							</option>
							<# } #>
							<#
							var size = data.sizes['full'];
							if ( size ) { #>
							<option value="full"  selected='selected'>
								完整尺寸 &ndash; {{ size.width }} &times; {{ size.height }}
							</option>
							<# } #>
					</select>
			</label>
		<# } #>
</script>

<script type="text/html" id="tmpl-gallery-settings">
	<h3>相册设置</h3>

	<label class="setting">
		<span>链接到</span>
		<select class="link-to"
				data-setting="link"
		<# if ( data.userSettings ) { #>
			data-user-setting="urlbutton"
		<# } #>>

		<option value="post" selected>附件页面</option>
		<option value="file">媒体文件</option>
		<option value="none">无</option>
		</select>
	</label>

	<label class="setting">
		<span>栏目</span>
		<select class="columns" name="columns"
				data-setting="columns">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected='selected'>3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9"></option>
		</select>
	</label>

	<label class="setting">
		<span>随机顺序</span>
		<input type="checkbox" data-setting="_orderbyRandom" />
	</label>
</script>

<script type="text/html" id="tmpl-playlist-settings">
	<h3>播放列表设置</h3>

	<# var emptyModel = _.isEmpty( data.model ),
		isVideo = 'video' === data.controller.get('library').props.get('type'); #>

		<label class="setting">
			<input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #> checked="checked" <# } #> />
			<# if ( isVideo ) { #>
				<span>显示视频列表</span>
			<# } else { #>
				<span>显示曲目列表</span>
			<# } #>
		</label>

		<# if ( ! isVideo ) { #>
			<label class="setting">
				<input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #> checked="checked" <# } #> />
				<span>在曲目列表中显示艺术家名</span>
			</label>
		<# } #>

		<label class="setting">
			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #> checked="checked" <# } #> />
			<span>显示图像</span>
		</label>
</script>

<script type="text/html" id="tmpl-embed-link-settings">
	<label class="setting">
		<span>标题</span>
		<input type="text" class="alignment" data-setting="title" />
	</label>
</script>

<script type="text/html" id="tmpl-embed-image-settings">
	<div class="thumbnail">
		<img src="{{ data.model.url }}" draggable="false" />
	</div>

	<label class="setting caption">
		<span>说明</span>
		<textarea data-setting="caption" />
	</label>

	<label class="setting alt-text">
		<span>替代文本</span>
		<input type="text" data-setting="alt" />
	</label>

	<div class="setting align">
		<span>对齐</span>
		<div class="button-group button-large" data-setting="align">
			<button class="button" value="left">左</button>
			<button class="button" value="center">中</button>
			<button class="button" value="right">右</button>
			<button class="button active" value="none">无</button>
		</div>
	</div>

	<div class="setting link-to">
		<span>链接到</span>
		<div class="button-group button-large" data-setting="link">
			<button class="button" value="file">图像URL</button>
			<button class="button" value="custom">自定义URL</button>
			<button class="button active" value="none">无</button>
		</div>
		<input type="text" class="link-to-custom" data-setting="linkUrl" />
	</div>
</script>

<script type="text/html" id="tmpl-attachments-css">
	<style type="text/css" id="{{ data.id }}-css">
		#{{ data.id }} {
			padding: 0 {{ data.gutter }}px;
		}

		#{{ data.id }} .attachment {
			margin: {{ data.gutter }}px;
			width: {{ data.edge }}px;
		}

		#{{ data.id }} .attachment-preview,
		#{{ data.id }} .attachment-preview .thumbnail {
			width: {{ data.edge }}px;
			height: {{ data.edge }}px;
		}

		#{{ data.id }} .portrait .thumbnail img {
			max-width: {{ data.edge }}px;
			height: auto;
		}

		#{{ data.id }} .landscape .thumbnail img {
			width: auto;
			max-height: {{ data.edge }}px;
		}
	</style>
</script>

<script type="text/html" id="tmpl-image-details">
	<div class="media-embed">
		<div class="embed-media-settings">
			<div class="column-image">
				<div class="image">
					<img src="{{ data.model.url }}" draggable="false" />

					<# if ( data.attachment && window.imageEdit ) { #>
					<div class="actions">
						<input type="button" class="edit-attachment button" value="编辑原始文件" />
						<input type="button" class="replace-attachment button" value="替换" />
					</div>
					<# } #>
				</div>
			</div>
			<div class="column-settings">
				<label class="setting caption">
					<span>说明</span>
					<textarea data-setting="caption">{{ data.model.caption }}</textarea>
				</label>

				<label class="setting alt-text">
					<span>替代文本</span>
					<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
				</label>

				<h3>显示设置</h3>
				<div class="setting align">
					<span>对齐</span>
					<div class="button-group button-large" data-setting="align">
						<button class="button" value="left">左</button>
						<button class="button" value="center">中</button>
						<button class="button" value="right">右</button>
						<button class="button active" value="none">无</button>
					</div>
				</div>

				<# if ( data.attachment ) { #>
					<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
						<label class="setting size">
							<span>尺寸</span>
							<select class="size" name="size"
									data-setting="size"
							<# if ( data.userSettings ) { #>
								data-user-setting="imgsize"
							<# } #>>
							<#
								var size = data.sizes['thumbnail'];
								if ( size ) { #>
								<option value="thumbnail">
									缩略图 &ndash; {{ size.width }} &times; {{ size.height }}
								</option>
								<# } #>
								<#
									var size = data.sizes['medium'];
									if ( size ) { #>
									<option value="medium">
										中等 &ndash; {{ size.width }} &times; {{ size.height }}
									</option>
								<# } #>
								<#
									var size = data.sizes['large'];
									if ( size ) { #>
									<option value="large">
										大 &ndash; {{ size.width }} &times; {{ size.height }}
									</option>
								<# } #>
								<#
									var size = data.sizes['full'];
									if ( size ) { #>
									<option value="full">
										完整尺寸 &ndash; {{ size.width }} &times; {{ size.height }}
									</option>
								<# } #>
								<option value="custom">自定义尺寸	</option>
							</select>
						</label>
						<# } #>
							<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
								<label><span>宽度 <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span>高度 <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
							</div>
					<# } #>

					<div class="setting link-to">
						<span>链接到</span>
						<select data-setting="link">
							<# if ( data.attachment ) { #>
								<option value="file">媒体文件</option>
								<option value="post">附件页面</option>
								<# } else { #>
								<option value="file">图像URL</option>
							<# } #>
								<option value="custom">自定义URL</option>
								<option value="none">无</option>
						</select>
						<input type="text" class="link-to-custom" data-setting="linkUrl" />
					</div>
					<div class="advanced-section">
						<h3><a class="advanced-toggle" href="#">高级选项</a></h3>
						<div class="advanced-settings hidden">
							<div class="advanced-image">
								<label class="setting title-text">
									<span>图像标题属性</span>
									<input type="text" data-setting="title" value="{{ data.model.title }}" />
								</label>
								<label class="setting extra-classes">
									<span>图像CSS类</span>
									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
								</label>
							</div>
							<div class="advanced-link">
								<div class="setting link-target">
									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>在新窗口或标签页打开链接</label>
								</div>
								<label class="setting link-rel">
									<span>链接Rel</span>
									<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
								</label>
								<label class="setting link-class-name">
									<span>链接CSS类</span>
									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
								</label>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmpl-image-editor">
	<div id="media-head-{{ data.id }}"></div>
	<div id="image-editor-{{ data.id }}"></div>
</script>

<script type="text/html" id="tmpl-audio-details">
	<# var ext, html5types = {
	mp3: wp.media.view.settings.embedMimes.mp3,
	ogg: wp.media.view.settings.embedMimes.ogg
	}; #>

		<div class="media-embed media-embed-details">
			<div class="embed-media-settings embed-audio-settings">
				<audio controls
					class="wp-audio-shortcode"
					width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
					preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
				<#
					if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
					#> autoplay<#
					}
					if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
					#> loop<#
					}
					#>
					>
					<# if ( ! _.isEmpty( data.model.src ) ) { #>
						<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
					<# } #>

					<# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
						<source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
					<# } #>

					<# if ( ! _.isEmpty( data.model.ogg ) ) { #>
						<source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
					<# } #>

					<# if ( ! _.isEmpty( data.model.wma ) ) { #>
						<source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
					<# } #>

					<# if ( ! _.isEmpty( data.model.m4a ) ) { #>
						<source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
					<# } #>

					<# if ( ! _.isEmpty( data.model.wav ) ) { #>
						<source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
					<# } #>
				</audio>

				<# if ( ! _.isEmpty( data.model.src ) ) {
					ext = data.model.src.split('.').pop();
					if ( html5types[ ext ] ) {
						delete html5types[ ext ];
					}
				#>
					<label class="setting">
					<span>SRC</span>
						<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>

				<# if ( ! _.isEmpty( data.model.mp3 ) ) {
					if ( ! _.isUndefined( html5types.mp3 ) ) {
						delete html5types.mp3;
					}
				#>
					<label class="setting">
						<span>MP3</span>
						<input type="text" disabled="disabled" data-setting="mp3" value="{{ data.model.mp3 }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.ogg ) ) {
					if ( ! _.isUndefined( html5types.ogg ) ) {
						delete html5types.ogg;
					}
				#>
					<label class="setting">
						<span>OGG</span>
						<input type="text" disabled="disabled" data-setting="ogg" value="{{ data.model.ogg }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.wma ) ) {
					if ( ! _.isUndefined( html5types.wma ) ) {
					delete html5types.wma;
					}
					#>
					<label class="setting">
						<span>WMA</span>
						<input type="text" disabled="disabled" data-setting="wma" value="{{ data.model.wma }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.m4a ) ) {
					if ( ! _.isUndefined( html5types.m4a ) ) {
					delete html5types.m4a;
					}
					#>
					<label class="setting">
						<span>M4A</span>
						<input type="text" disabled="disabled" data-setting="m4a" value="{{ data.model.m4a }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.wav ) ) {
					if ( ! _.isUndefined( html5types.wav ) ) {
					delete html5types.wav;
					}
					#>
					<label class="setting">
						<span>WAV</span>
						<input type="text" disabled="disabled" data-setting="wav" value="{{ data.model.wav }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>

				<# if ( ! _.isEmpty( html5types ) ) { #>
				<div class="setting">
					<span>为了增强HTML5播放体验，请添加备用源：</span>
					<div class="button-large">
						<# _.each( html5types, function (mime, type) { #>
							<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
							<# } ) #>
					</div>
				</div>
				<# } #>

			<div class="setting preload">
				<span>预加载</span>
				<div class="button-group button-large" data-setting="preload">
					<button class="button" value="auto">自动</button>
					<button class="button" value="metadata">元数据</button>
					<button class="button active" value="none">无</button>
				</div>
			</div>

			<label class="setting checkbox-setting">
				<span>自动播放</span>
				<input type="checkbox" data-setting="autoplay" />
			</label>

			<label class="setting checkbox-setting">
				<span>循环</span>
				<input type="checkbox" data-setting="loop" />
			</label>
			<div class="clear"></div>
		</div>
	</div>
</script>

<script type="text/html" id="tmpl-video-details">
<# var ext, html5types = {
	mp4: wp.media.view.settings.embedMimes.mp4,
	ogv: wp.media.view.settings.embedMimes.ogv,
	webm: wp.media.view.settings.embedMimes.webm
	}; #>

<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-video-settings">
<div class="wp-video-holder">
	<#
		var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
		w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
		h = ! data.model.height ? 360 : data.model.height;

		if ( data.model.width && w !== data.model.width ) {
		h = Math.ceil( ( h * w ) / data.model.width );
		}
		#>

		<#  var w, h, settings = wp.media.view.settings,
			isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);

			if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
				w = settings.contentWidth;
			} else {
				w = data.model.width;
			}

			if ( w !== data.model.width ) {
				h = Math.ceil( ( h * w ) / data.model.width );
			} else {
				h = data.model.height;
			}
		#>
			<div style="max-width: 100%; width: {{ w }}px">
				<video controls
					   class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
					   width="{{ w }}"
					   height="{{ h }}"
				<#
					if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
				#> poster="{{ data.model.poster }}"<#
					} #>
					preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
				if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
					#> autoplay<#
				}
					if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
					#> loop<#
					}
					#>
					>
					<# if ( ! _.isEmpty( data.model.src ) ) {
						if ( isYouTube ) { #>
						<source src="{{ data.model.src }}" type="video/youtube" />
						<# } else { #>
						<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
						<# }
					} #>

					<# if ( data.model.mp4 ) { #>
						<source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
						<# } #>
					<# if ( data.model.m4v ) { #>
						<source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
						<# } #>
					<# if ( data.model.webm ) { #>
						<source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
						<# } #>
					<# if ( data.model.ogv ) { #>
						<source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
						<# } #>
					<# if ( data.model.wmv ) { #>
						<source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
						<# } #>
					<# if ( data.model.flv ) { #>
						<source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
						<# } #>
						{{{ data.model.content }}}
					</video>
			</div>

			<# if ( ! _.isEmpty( data.model.src ) ) {
				ext = data.model.src.split('.').pop();
				if ( html5types[ ext ] ) {
				delete html5types[ ext ];
				}
			#>
				<label class="setting">
					<span>SRC</span>
					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
					<a class="remove-setting">移除</a>
				</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.mp4 ) ) {
					if ( ! _.isUndefined( html5types.mp4 ) ) {
					delete html5types.mp4;
				}
				#>
				<label class="setting">
					<span>MP4</span>
					<input type="text" disabled="disabled" data-setting="mp4" value="{{ data.model.mp4 }}" />
					<a class="remove-setting">移除</a>
				</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.m4v ) ) {
					if ( ! _.isUndefined( html5types.m4v ) ) {
					delete html5types.m4v;
				}
				#>
					<label class="setting">
						<span>M4V</span>
						<input type="text" disabled="disabled" data-setting="m4v" value="{{ data.model.m4v }}" />
						<a class="remove-setting">移除</a>
					</label>
				<# } #>
				<# if ( ! _.isEmpty( data.model.webm ) ) {
					if ( ! _.isUndefined( html5types.webm ) ) {
					delete html5types.webm;
					}
					#>
						<label class="setting">
							<span>WEBM</span>
							<input type="text" disabled="disabled" data-setting="webm" value="{{ data.model.webm }}" />
							<a class="remove-setting">移除</a>
						</label>
					<# } #>
										<# if ( ! _.isEmpty( data.model.ogv ) ) {
												if ( ! _.isUndefined( html5types.ogv ) ) {
												delete html5types.ogv;
												}
												#>
												<label class="setting">
													<span>OGV</span>
													<input type="text" disabled="disabled" data-setting="ogv" value="{{ data.model.ogv }}" />
													<a class="remove-setting">移除</a>
												</label>
												<# } #>
										<# if ( ! _.isEmpty( data.model.wmv ) ) {
											if ( ! _.isUndefined( html5types.wmv ) ) {
											delete html5types.wmv;
											}
											#>
											<label class="setting">
												<span>WMV</span>
												<input type="text" disabled="disabled" data-setting="wmv" value="{{ data.model.wmv }}" />
												<a class="remove-setting">移除</a>
											</label>
											<# } #>
										<# if ( ! _.isEmpty( data.model.flv ) ) {
											if ( ! _.isUndefined( html5types.flv ) ) {
											delete html5types.flv;
											}
											#>
											<label class="setting">
												<span>FLV</span>
												<input type="text" disabled="disabled" data-setting="flv" value="{{ data.model.flv }}" />
												<a class="remove-setting">移除</a>
											</label>
											<# } #>
</div>

<# if ( ! _.isEmpty( html5types ) ) { #>
	<div class="setting">
		<span>为了增强HTML5播放体验，请添加备用源：</span>
		<div class="button-large">
			<# _.each( html5types, function (mime, type) { #>
				<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
				<# } ) #>
		</div>
	</div>
	<# } #>

		<# if ( ! _.isEmpty( data.model.poster ) ) { #>
			<label class="setting">
				<span>海报图像</span>
				<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
				<a class="remove-setting">移除</a>
			</label>
			<# } #>
				<div class="setting preload">
					<span>预加载</span>
					<div class="button-group button-large" data-setting="preload">
						<button class="button" value="auto">自动</button>
						<button class="button" value="metadata">元数据</button>
						<button class="button active" value="none">无</button>
					</div>
				</div>

				<label class="setting checkbox-setting">
					<span>自动播放</span>
					<input type="checkbox" data-setting="autoplay" />
				</label>

				<label class="setting checkbox-setting">
					<span>循环</span>
					<input type="checkbox" data-setting="loop" />
				</label>
				<div class="clear"></div>

				<label class="setting" data-setting="content">
					<span>曲目（字幕、说明、描述、章节或元数据）</span>
					<#
						var content = '';
						if ( ! _.isEmpty( data.model.content ) ) {
						var tracks = jQuery( data.model.content ).filter( 'track' );
						_.each( tracks.toArray(), function (track) {
						content += track.outerHTML; #>
						<p>
							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
							<a class="remove-setting remove-track">移除</a>
						</p>
						<# } ); #>
						<# } else { #>
							<em>没有关联的字幕。</em>
						<# } #>
						<textarea class="hidden content-setting">{{ content }}</textarea>
				</label>
</div>
</div>
</script>

<script type="text/html" id="tmpl-editor-gallery">
	<div class="toolbar">
		<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
	</div>
	<# if ( data.attachments ) { #>
		<div class="gallery gallery-columns-{{ data.columns }}">
			<# _.each( data.attachments, function( attachment, index ) { #>
				<dl class="gallery-item">
					<dt class="gallery-icon">
						<# if ( attachment.thumbnail ) { #>
							<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
						<# } else { #>
							<img src="{{ attachment.url }}" />
						<# } #>
					</dt>
					<dd class="wp-caption-text gallery-caption">
						{{ attachment.caption }}
					</dd>
				</dl>
				<# if ( index % data.columns === data.columns - 1 ) { #>
					<br style="clear: both;">
				<# } #>
			<# } ); #>
		</div>
		<# } else { #>
			<div class="wpview-error">
				<div class="dashicons dashicons-format-gallery"></div><p>找不到条目。</p>
			</div>
			<# } #>
</script>

<script type="text/html" id="tmpl-editor-audio">
	<div class="toolbar">
		<div class="dashicons dashicons-edit edit"></div>
		<div class="dashicons dashicons-no-alt remove"></div>
	</div>
	<audio controls
		   class="wp-audio-shortcode"
		   width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
		   preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
	<#
		if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
		#> autoplay<#
		}
		if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
		#> loop<#
		}
		#>
		>
		<# if ( ! _.isEmpty( data.model.src ) ) { #>
			<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
		<# } #>

		<# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
			<source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
		<# } #>
		<# if ( ! _.isEmpty( data.model.ogg ) ) { #>
			<source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
		<# } #>
		<# if ( ! _.isEmpty( data.model.wma ) ) { #>
			<source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
		<# } #>
		<# if ( ! _.isEmpty( data.model.m4a ) ) { #>
			<source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
		<# } #>
		<# if ( ! _.isEmpty( data.model.wav ) ) { #>
			<source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
		<# } #>
	</audio>
	<div class="wpview-overlay"></div>
</script>

<script type="text/html" id="tmpl-editor-video">
	<div class="toolbar">
		<div class="dashicons dashicons-edit edit"></div>
		<div class="dashicons dashicons-no-alt remove"></div>
	</div>
	<#  var w, h, settings = wp.media.view.settings,
		isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);

		if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
		w = settings.contentWidth;
		} else {
		w = data.model.width;
		}

		if ( w !== data.model.width ) {
		h = Math.ceil( ( h * w ) / data.model.width );
		} else {
		h = data.model.height;
		}
		#>
		<div style="max-width: 100%; width: {{ w }}px">
			<video controls
				   class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
				   width="{{ w }}"
				   height="{{ h }}"
			<#
				if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
				#> poster="{{ data.model.poster }}"<#
				} #>
				preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
				if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
				#> autoplay<#
				}
				if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
				#> loop<#
				}
				#>
				>
				<# if ( ! _.isEmpty( data.model.src ) ) {
					if ( isYouTube ) { #>
					<source src="{{ data.model.src }}" type="video/youtube" />
					<# } else { #>
						<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
					<# }
				} #>

				<# if ( data.model.mp4 ) { #>
					<source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
				<# } #>
				<# if ( data.model.m4v ) { #>
					<source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
				<# } #>
				<# if ( data.model.webm ) { #>
					<source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
				<# } #>
				<# if ( data.model.ogv ) { #>
				<source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
				<# } #>
				<# if ( data.model.wmv ) { #>
				<source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
				<# } #>
				<# if ( data.model.flv ) { #>
					<source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
				<# } #>
				{{{ data.model.content }}}
				</video>
		</div>
		<div class="wpview-overlay"></div>
</script>

<script type="text/html" id="tmpl-wp-playlist-current-item">
	<# if ( data.image ) { #>
		<img src="{{ data.thumb.src }}"/>
	<# } #>
		<div class="wp-playlist-caption">
			<span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
			<# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
			<# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
		</div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
	<div class="wp-playlist-item">
		<a class="wp-playlist-caption" href="{{ data.src }}">
			{{ data.index ? ( data.index + '. ' ) : '' }}
			<# if ( data.caption ) { #>
				{{ data.caption }}
			<# } else { #>
				<span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
				<# if ( data.artists && data.meta.artist ) { #>
					<span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
				<# } #>
			<# } #>
		</a>
		<# if ( data.meta.length_formatted ) { #>
		<div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
		<# } #>
	</div>
</script>

<script type="text/html" id="tmpl-editor-playlist">
	<div class="toolbar">
		<div class="dashicons dashicons-edit edit"></div>
		<div class="dashicons dashicons-no-alt remove"></div>
	</div>
	<# if ( data.tracks ) { #>
		<div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
			<# if ( 'audio' === data.type ){ #>
				<div class="wp-playlist-current-item"></div>
			<# } #>
			<{{ data.type }} controls="controls" preload="none" <#
			if ( data.width ) { #> width="{{ data.width }}"<# }
			#><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
			<div class="wp-playlist-next"></div>
			<div class="wp-playlist-prev"></div>
		</div>
		<div class="wpview-overlay"></div>
		<# } else { #>
		<div class="wpview-error">
			<div class="dashicons dashicons-video-alt3"></div><p>找不到条目。</p>
		</div>
		<# } #>
</script>

<script type="text/html" id="tmpl-crop-content">
	<img class="crop-image" src="{{ data.url }}">
	<div class="upload-errors"></div>
</script>
